<template>
  <div>
<ul v-for="item in list">
  <li>姓名：{{item.name}}
  <br>年龄：{{item.age}}</li>
</ul>
<table border="1">
  <tr bgcolor="red">
    <td>用户借款编号</td>
    <td>借款用户账号</td>
    <td>借款款项名称</td>
    <td>借款金额</td>
    <td>剩余还款本金</td>
  </tr>
  <tr v-for="item in blist">
    <td>{{item.hao}}</td>
    <td>{{item.zhang}}</td>
    <td>{{item.xiang}}</td>
    <td>{{item.jin}}</td>
    <td>{{item.ben}}</td>
  </tr>
</table>
<h1 style="font-size: 50px;font-weight: 800px;">{{str}}</h1>
  </div>
</template>

<script setup lang="ts">
 import { reactive,toRefs,ref} from 'vue';
 let str=ref("双向数据绑定演示")
 let data=reactive({
  list:[
    {name:'张大',age:'21'},
    {name:'李尔',age:'20'},
    {name:'刘珊',age:'22'},
    {name:'钱嗣',age:'25'},
    {name:'赵武',age:'24'}
  ],
  blist:[
    {hao:1,zhang:'zhangsan',xiang:'八维助学金',jin:400,ben:0},
    {hao:2,zhang:'zhangsan',xiang:'八维助学金',jin:10000,ben:10000}
  ]
 })
 let {list,blist}=toRefs(data)
</script>

<style scoped>
ul{
  list-style: none;
}
li{
  margin-bottom: 40px;
}
</style>